<template>
	<div class="album">
		<div v-if="this.albumid == 0" class="albun-no">
			暂无专辑
		</div>
		<div class="album-has" v-else>
			<el-row class="title">
				<el-col :span="16"> 歌曲名 </el-col>
				<el-col :span="6"> 歌手名 </el-col>
				<el-col :span="2" class="time">
					时间
				</el-col>
			</el-row>
			<el-row
				class="content"
				v-for="(item, index) of albumList"
				:key="index"
			>
				<el-col :span="16" class="filename">
					<span @click="getPlayMusic(item.hash)">{{
						item.filename.split(" - ")[1]
					}}</span
					><i
						@click="targetvideoDetails(item.mvhash)"
						v-if="item.mvhash"
					>
						&#xe6af;
					</i>
				</el-col>
				<el-col :span="6" class="album">
					<span>{{ item.filename.split(" - ")[0] }}</span>
				</el-col>
				<el-col :span="2" class="time">
					{{ item.duration }}
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 专辑id
			albumid: this.$route.params.albumid,
			// 专辑列表
			albumList: [],
		};
	},
	methods: {
		// 获取专辑详细信息
		getAlbumDetails() {
			this.axios
				.get(
					`/api-album/song?version=9108&albumid=${this.albumid}&plat=0&pagesize=100&area_code=1&page=1&with_res_tag=1`
				)
				.then((res) => {
					if (this.albumid == 0) {
						console.log("专辑不存在");
					} else {
						const result = res.data
							.replace(/<!--KG_TAG_RES_START-->/, "")
							.replace(/<!--KG_TAG_RES_END-->/, "");
						const results = JSON.parse(result);
						results.data.info.forEach((item) => {
							item.duration = this.moment(
								item.duration * 1000
							).format("mm:ss");
						});
						this.albumList = results.data.info;
					}
				})
				.catch((err) => {
					throw err;
				});
		},
		// 播放mv
		targetvideoDetails(videohash) {
			sessionStorage.setItem("videohash", videohash);
			this.$router.push(`/VideoDetails/${videohash}`);
		},
		// 点击播放音乐
		getPlayMusic(hash) {
			this.$store.dispatch("updatePlayMusic", {
				hash: hash,
				this: this,
			});
		},
	},
	mounted() {
		this.getAlbumDetails();
	},
};
</script>
<style lang="scss">
.album {
	.albun-no {
		font-size: 20px;
		font-weight: 700;
		text-align: center;
	}
	.album-has {
		.title {
			padding: 0 20px;
			height: 44px;
			border-bottom: 1px solid #f5f5f5;
			.el-col {
				height: 44px;
				line-height: 44px;
				font-size: 14px;
				color: #858585;
				&.time {
					text-align: right;
				}
			}
		}
		.content {
			display: flex;
			height: 44px;
			padding: 0 20px;
			.el-col {
				line-height: 100%;
				line-height: 44px;
				font-size: 14px;
				span {
					cursor: pointer;
					&:hover {
						color: #5192fe;
					}
				}
				&.album {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				&.time {
					text-align: right;
					color: #858585;
					font-size: 13px;
				}
				&.filename {
					align-items: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					i {
						position: absolute;
						font-family: "iconfont";
						font-size: 23px;
						color: #5192fe;
						margin-left: 5px;
						cursor: pointer;
						transform: translateY(1px);
					}
				}
			}
			&:hover {
				background-color: #f9f9f9;
			}
		}
	}
}
</style>
